<template>
    <el-button type="primary" class="w115 "  @click="form={};editShow = true;" >新增知道响买</el-button>
   
    <div  class="bgf mart20" v-loading="loading" >
        <el-table ref="selectTable" :data="list" >
            <el-table-column fixed label="图片" show-overflow-tooltip min-width="120">
                <template #default="scope">
                    <el-image :src="scope.row.img" fit="cover" style="width:96px;height:60px" />
                </template>
            </el-table-column>

            <el-table-column prop="sort" min-width="80" label="排序" show-overflow-tooltip ></el-table-column>

            <el-table-column prop="text" min-width="160" label="文案" show-overflow-tooltip ></el-table-column>

            <el-table-column fixed="right" label="操作" width="120" >
                <template #default="scope">
                    <el-button @click="editBanner(scope.row)" text type="primary">编辑</el-button>
                    <el-divider direction="vertical" />
                    <el-button  @click="delBanner(scope.row.id)" text type="primary">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="h70 pad20 flexab ">
            <p class="font10 cola4">共 {{total}} 条</p>
            <el-pagination
                v-model:currentPage="param.pageNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="param.pageSize"
                layout=" sizes, prev , jumper , next"
                :total="total">
            </el-pagination>
        </div>
    </div>

    <el-dialog v-model="editShow" :title="form.id ? '编辑': '新增知道响买'" width="647px"  >
        <el-form :model="form" class="demo-form-inline" label-width="110px"  >
            <el-form-item label="banner海报：" >
                <el-upload
                    :headers="{ token: $store.state.token }"
                    :action = globalUrl 
                    :before-upload="beforeAvatarUpload"
                    :on-success="(val)=>uploadSuccess(val,'img')"
                    class="avatar-uploader"
                    name="files"
                    :show-file-list="false"
                >
                    <img v-if="form.img" :src="form.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
                <div class="col9e lh20 padt10 font12">
                    支持 .jpg, .gif, .png, .bmp 格式，单个图片不超过 10 MB。建议尺寸为：690*240
                </div>
            </el-form-item>

            <el-form-item label="排序：">
                <el-input v-model="form.sort" placeholder="请输入排序" class="w145"> </el-input>
            </el-form-item>

            <el-form-item label="文案：" prop="goodsName">
                <el-input v-model="form.text" placeholder="请输入文案" class="w336" :autosize="{ minRows: 4, }" type="textarea" />
            </el-form-item>
        </el-form>
             
        <template #footer>
            <div >
                <el-button @click="editShow = false" >取消</el-button>
                <el-button type="primary" @click="editSub" >确定</el-button>
            </div>
        </template>
    </el-dialog>

</template>
<script>
export default {
    data(){
        return{
            editShow: false,
            globalUrl: '/api/system/upload/uploadList',
            param:{
                pageNumber:1,
                pageSize: 10,
            },
            loading: false,
            form:{},
            list:[],
            total:0,
        }
    },
    mounted(){
        this.getList();
    },
    methods:{

        delBanner(id){
            this.$msgbox.confirm(
                "知道响买删除请谨慎操作，删除后将无法恢复，确定删除？",
                "删除知道响买",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                }
            ).then(async() => {
                let that = this;
                // return;
                let res = await that.$api.deleteKnowXiangMai(id);
                
                console.log(res);
                if(res){
                    that.getList();
                    that.$message.success('删除成功');
                }
            }).catch(() => {});
        },

        editBanner(val){
            let that = this;
            that.form = JSON.parse( JSON.stringify(val) );
            that.editShow = true;
        },

        // 提交--添加/编辑
        async editSub(){
            let that = this;
            console.log(that.form,'this.form=====');

            // return;
            let res;
            if(this.form.id){
                res = await that.$api.updateKnowXiangMai(this.form);
            }else{
                res = await that.$api.createKnowXiangMai(this.form);
            }
            console.log(res);
            if(res){
                that.editShow = false;
                that.getList()
            }
        },

        async getList(){
            // console.log('00000000')
            let that = this;
            let res;
            that.loading = true;

            console.log(that.param,'this.param=====')
            res = await that.$api.knowXiangMaipage(that.param);
            console.log(res);
            if(res){
                that.list = res.records;
                that.total = res.total;
            }
           
            that.loading = false;
        },

         //图片上传成功
        uploadSuccess(val,key){
            // console.log(val,key)
            this.loading = false;
            if(val.status==200){
                let img = this.utils.Decrypt(val.data);
                console.log(img)
                this.form[key] = img[0]
            }
        },
       
        beforeAvatarUpload(file){
            console.log('000000')
            const isLt = file.size / 1024 / 1024 < 3

            if (!isLt) {
                this.$message.warning('选择图片过大，请重新上传！');
            }
            return isLt 
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.param.pageSize = val;
            
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.param.pageNumber = val;
            this.getList();
        },
      
    }
}
</script>
<style lang="scss" scoped>
.avatar {
    width: 120px;
    height: 80px;
    object-fit: cover;
}
.el-icon.avatar-uploader-icon {
    width: 120px;
    height: 80px;
}
</style>